class AudioPanel {
    constructor(app) {
        this.app = app;
    }

    // 节选音频管理初始化
    initAudioManagement() {
        const audioPanel = document.getElementById('course-audio-panel');

        // 添加音频按钮功能
        const addAudioBtn = audioPanel.querySelector('#add-audio-btn');
        if (addAudioBtn) {
            addAudioBtn.addEventListener('click', () => this.showAudioModal('add'));
        }

        // 搜索功能
        const searchInput = audioPanel.querySelector('.search-input');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => this.handleAudioSearch(e));
        }
    }

    async loadCourseAudios(contentId) {
        try {
            const response = await this.app.authenticatedFetch(`/api/web/audio/getAllAudios?ccid=${contentId}`);
            const result = await response.json();

            if (result.code === 200) {
                const audios = result.data || [];
                const tbody = document.querySelector('#audios-table-body');
                tbody.innerHTML = '';

                // 加载行模板
                const rowTemplateResponse = await fetch('/templates/audio-row.html');
                const rowTemplateText = await rowTemplateResponse.text();

                // 使用DOMParser解析模板以确保完整的DOM结构
                const parser = new DOMParser();
                const doc = parser.parseFromString(rowTemplateText, 'text/html');
                const rowElement = doc.querySelector('tbody tr');

                // 检查模板是否正确加载
                if (!rowElement) {
                    throw new Error('音频行模板加载失败，找不到<tr>元素');
                }

                audios.forEach(audio => {
                    const row = rowElement.cloneNode(true);

                    // 使用ID直接获取并填充数据
                    row.querySelector('#audio-id').textContent = audio.id;
                    row.querySelector('#audio-content-title').textContent = this.app.currentContent ? this.app.currentContent.title : '未知内容';
                    row.querySelector('#audio-name').textContent = audio.name;
                    row.querySelector('#audio-create-date').textContent = Utils.formatDate(audio.create_date) || '';
                    row.querySelector('#audio-update-date').textContent = Utils.formatDate(audio.updata_date) || '';

                    // 设置按钮属性
                    const playBtn = row.querySelector('#audio-play-btn');
                    playBtn.setAttribute('data-url', audio.audio_url);
                    playBtn.setAttribute('data-name', audio.name);

                    const editBtn = row.querySelector('#audio-edit-btn');
                    editBtn.setAttribute('data-id', audio.id);
                    editBtn.setAttribute('data-ccid', audio.ccid);
                    editBtn.setAttribute('data-name', audio.name);
                    editBtn.setAttribute('data-url', audio.audio_url || '');

                    const deleteBtn = row.querySelector('#audio-delete-btn');
                    deleteBtn.setAttribute('data-id', audio.id);

                    tbody.appendChild(row);

                    // 绑定试听按钮事件
                    playBtn.addEventListener('click', (e) => {
                        const audioUrl = e.target.getAttribute('data-url');
                        const audioName = e.target.getAttribute('data-name');
                        this.playAudio(audioUrl, audioName);
                    });

                    // 绑定删除按钮事件
                    deleteBtn.addEventListener('click', (e) => {
                        const audioId = parseInt(e.target.getAttribute('data-id'));
                        const audioName = e.target.closest('tr').querySelector('#audio-name').textContent;
                        Utils.confirmAndDelete(audioName, () => this.deleteAudio(audioId, audioName));
                    });
                });

                // 绑定所有编辑按钮事件
                tbody.querySelectorAll('#audio-edit-btn').forEach(button => {
                    button.addEventListener('click', (e) => {
                        const audioData = {
                            id: parseInt(e.target.getAttribute('data-id')),
                            ccid: parseInt(e.target.getAttribute('data-csid')),
                            name: e.target.getAttribute('data-name'),
                            audio_url: e.target.getAttribute('data-url')
                        };
                        this.showAudioModal('edit', audioData);
                    });
                });

                // 重新绑定搜索功能
                const searchInput = document.querySelector('#course-audio-panel .search-input');
                if (searchInput) {
                    searchInput.addEventListener('input', (e) => this.handleAudioSearch(e));
                }

                // 如果没有音频，显示提示信息
                if (audios.length === 0) {
                    const row = document.createElement('tr');
                    row.innerHTML = `<td colspan="7" style="text-align: center;">该内容下暂无音频</td>`;
                    tbody.appendChild(row);
                }
            } else {
                console.error('获取课程音频失败:', result.msg);
                Utils.showError(document.querySelector('#audios-table-body'), '获取课程音频失败');
            }
        } catch (error) {
            console.error('加载课程音频数据失败:', error);
            Utils.showError(document.querySelector('#audios-table-body'), '加载课程音频数据失败');
        }
    }

    // 初始化音频播放模态框
    async initAudioPlayerModal(audioUrl, audioName) {
        try {
            // 加载外部模态框模板
            const response = await fetch('/templates/audio-player-modal.html');
            const template = await response.text();

            // 创建模态框
            let modal = document.getElementById('audio-player-modal');
            if (!modal) {
                modal = document.createElement('div');
                modal.className = 'modal';
                modal.id = 'audio-player-modal';
                document.body.appendChild(modal);
            }

            modal.innerHTML = template;

            // 填充音频信息
            const titleElement = modal.querySelector('#audio-player-title');
            const sourceElement = modal.querySelector('#audio-player-source');

            if (titleElement) {
                titleElement.textContent = audioName;
            }

            // 构造解密播放的URL
            if (sourceElement) {
                // 从原始URL中提取文件路径部分
                const filePath = audioUrl.substring(audioUrl.indexOf('/uploads'));
                sourceElement.src = `/api/web/audio/playAudio?filePath=${encodeURIComponent(filePath)}`;
            }

            return modal;
        } catch (error) {
            console.error('加载音频播放模态框模板失败:', error);
            return null;
        }
    }

    async playAudio(audioUrl, audioName) {
        // 初始化音频播放模态框
        const modal = await this.initAudioPlayerModal(audioUrl, audioName);
        if (!modal) {
            console.error('无法加载音频播放模态框模板');
            alert('无法打开音频播放模态框，请稍后重试');
            return;
        }

        // 显示模态框
        modal.style.display = 'block';

        // 绑定关闭事件
        const closeBtn = modal.querySelector('.close');

        const closeModal = () => {
            modal.style.display = 'none';
            // 暂停音频播放
            const audioElement = modal.querySelector('audio');
            if (audioElement) {
                audioElement.pause();
            }
        };

        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }

        // 点击模态框外部关闭
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });

        // 重新加载音频元素以确保正确播放
        const audioElement = modal.querySelector('audio');
        if (audioElement) {
            // 使用Blob URL方式处理带认证的音频请求
            const sourceElement = modal.querySelector('#audio-player-source');
            const audioSrc = sourceElement.src;
            
            // 获取认证token
            const token = localStorage.getItem('Authorization');
            
            if (token) {
                // 使用fetch API获取音频数据，并添加认证头
                fetch(audioSrc, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.blob();
                })
                .then(blob => {
                    const objectUrl = URL.createObjectURL(blob);
                    audioElement.src = objectUrl;
                    audioElement.load();
                    
                    // 在音频播放结束后释放资源
                    audioElement.addEventListener('loadstart', () => {
                        URL.revokeObjectURL(objectUrl);
                    });
                })
                .catch(error => {
                    console.error('获取音频数据失败:', error);
                    alert('播放音频失败: ' + error.message);
                });
            } else {
                audioElement.load();
            }
        }
    }

    // 初始化音频模态框
    async initAudioModal(mode, audioData = null) {
        try {
            // 加载外部模态框模板
            const response = await fetch('/templates/audio-modal.html');
            const template = await response.text();

            // 创建模态框
            let modal = document.getElementById('audio-modal');
            if (!modal) {
                modal = document.createElement('div');
                modal.className = 'modal';
                modal.id = 'audio-modal';
                document.body.appendChild(modal);
            }

            modal.innerHTML = template;

            // 设置标题和按钮文本
            const titleElement = modal.querySelector('h3');
            const submitButton = modal.querySelector('.btn.primary');
            if (mode === 'add') {
                titleElement.textContent = '添加音频';
                submitButton.textContent = '添加';
            } else {
                titleElement.textContent = '编辑音频';
                submitButton.textContent = '更新';
            }

            return modal;
        } catch (error) {
            console.error('加载音频模态框模板失败:', error);
            return null;
        }
    }

    showAudioModal(mode, audioData = null) {
        // 检查是否已选择内容（仅在添加模式下检查）
        if (mode === 'add' && !this.app.currentContent) {
            alert('请先选择一个内容');
            return;
        }

        // 初始化模态框
        this.initAudioModal(mode, audioData).then(modal => {
            if (!modal) {
                console.error('无法加载音频模态框模板');
                alert('无法打开音频模态框，请稍后重试');
                return;
            }

            // 获取表单元素
            const form = modal.querySelector('#audio-form');
            const idInput = modal.querySelector('#audio-id');
            const ccidInput = modal.querySelector('#audio-ccid');
            const ccidHiddenInput = modal.querySelector('#audio-ccid');
            const titleInput = modal.querySelector('#audio-content-title');
            const nameInput = modal.querySelector('#audio-name');
            const fileInput = modal.querySelector('#audio-file');
            const currentFileContainer = modal.querySelector('#current-file-container');
            const currentLink = modal.querySelector('#current-audio-link');
            const closeBtn = modal.querySelector('.close');
            const cancelBtn = modal.querySelector('#cancel-audio');

            if (ccidHiddenInput) {
                ccidHiddenInput.value = this.app.currentContent.id;
            }
            // 根据模式填充表单数据
            if (mode === 'edit' && audioData) {
                // 编辑模式
                if (idInput) {
                    idInput.value = audioData.id;
                }

                if (ccidInput) {
                    ccidInput.style.display = 'none'; // 完全隐藏
                }



                if (nameInput) {
                    nameInput.value = audioData.name;
                }

                // 显示当前文件信息
                if (currentFileContainer) {
                    currentFileContainer.style.display = 'block';
                }

                if (currentLink) {
                    currentLink.href = audioData.audio_url;
                }

                // 移除文件输入的 required 属性
                if (fileInput) {
                    fileInput.removeAttribute('required');
                }

                // 显示所属内容字段
                if (titleInput) {
                    titleInput.value = this.app.currentContent ? this.app.currentContent.title : '未知内容';
                    titleInput.style.display = 'block';
                }
            } else {
                // 添加模式
                if (titleInput) {
                    titleInput.value = this.app.currentContent ? this.app.currentContent.title : '';
                    titleInput.style.display = 'block';
                }

                if (ccidInput) {
                    ccidInput.style.display = 'none';
                }

                // 隐藏当前文件信息
                if (currentFileContainer) {
                    currentFileContainer.style.display = 'none';
                }

                // 添加文件输入的 required 属性
                if (fileInput) {
                    fileInput.setAttribute('required', 'required');
                }
            }

            const closeModal = () => {
                if (modal && modal.parentNode) {
                    modal.remove();
                }
            };

            // 绑定关闭事件
            if (closeBtn) {
                closeBtn.addEventListener('click', closeModal);
            }

            if (cancelBtn) {
                cancelBtn.addEventListener('click', closeModal);
            }

            // 表单提交事件
            form.addEventListener('submit', (e) => this.handleAudioSubmit(e, mode));

            // 显示模态框
            modal.style.display = 'block';
        });
    }

    async handleAudioSubmit(e, mode) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        // 获取表单数据
        const id = formData.get('id');
        let ccid = formData.get('ccid');
        const name = formData.get('name');
        const audioFile = formData.get('audioFile');

        // 如果是添加模式，从隐藏字段获取 ccid
        if (mode === 'add' && !ccid) {
            const ccidHiddenInput = form.querySelector('#audio-ccid');
            if (ccidHiddenInput) {
                ccid = ccidHiddenInput.value;
            }
        }

        // 验证必填字段
        if (!name.trim()) {
            alert('请输入音频标题');
            return;
        }

        if (mode === 'add' && (!audioFile || audioFile.size === 0)) {
            alert('请选择音频文件');
            return;
        }

        if (!ccid) {
            alert('未选择内容');
            return;
        }

        // 创建FormData对象
        const submitData = new FormData();
        if (mode === 'edit') {
            submitData.append('id', id);
        }
        submitData.append('ccid', ccid);
        submitData.append('name', name.trim());

        // 添加获取音频时长的函数
        const getAudioDuration = (file) => {
            return new Promise((resolve, reject) => {
                // 检查文件是否为音频文件
                if (!file.type.startsWith('audio/')) {
                    reject(new Error('请选择音频文件'));
                    return;
                }

                // 创建一个临时的audio元素
                const audio = document.createElement('audio');
                
                // 创建文件URL
                const url = URL.createObjectURL(file);
                audio.src = url;
                
                // 监听loadedmetadata事件，当音频元数据加载完成时触发
                audio.addEventListener('loadedmetadata', () => {
                    // 获取音频时长（秒）
                    const duration = audio.duration;
                    // 释放创建的URL对象
                    URL.revokeObjectURL(url);
                    // 返回时长（四舍五入取整秒数）
                    resolve(Math.round(duration));
                });
                
                // 监听错误事件
                audio.addEventListener('error', () => {
                    URL.revokeObjectURL(url);
                    reject(new Error('无法读取音频文件'));
                });
            });
        };

        if (audioFile && audioFile.size > 0) {
            try {
                // 获取音频时长
                const duration = await getAudioDuration(audioFile);
                submitData.append('duration', duration);
                console.log('获取到音频时长：', duration, '秒');
            } catch (error) {
                console.error('获取音频时长失败:', error);
                alert('获取音频时长失败: ' + error.message);
                return;
            }
            submitData.append('audioFile', audioFile);
        }

        try {
            const url = mode === 'add' ? '/api/web/audio/addAudio' : '/api/web/audio/updateAudio';
            const response = await this.app.authenticatedFetch(url, {
                method: 'POST',
                body: submitData
            });

            const resultText = await response.text();

            let result;
            try {
                result = JSON.parse(resultText);
            } catch (parseError) {
                console.error('解析响应失败:', resultText);
                throw new Error('服务器响应格式错误');
            }

            if (result.code === 200) {
                const message = mode === 'add' ? '音频添加成功' : '音频更新成功';
                alert(message);
                // 关闭模态框
                const modal = document.getElementById('audio-modal');
                if (modal) {
                    modal.remove();
                }
                // 重新加载课程音频列表
                if (this.app.currentContent) {
                    this.loadCourseAudios(this.app.currentContent.id);
                }
            } else {
                const message = mode === 'add' ? '添加失败' : '更新失败';
                alert(message + ': ' + (result.msg || '未知错误'));
            }
        } catch (error) {
            console.error('操作音频失败:', error);
            const message = mode === 'add' ? '添加音频失败' : '更新音频失败';
            alert(message + ': ' + error.message);
        }
    }

    async deleteAudio(audioId, audioName) {
        try {
            const response = await this.app.authenticatedFetch(`/api/web/audio/deleteAudio/${audioId}`, {
                method: 'DELETE'
            });

            const resultText = await response.text();

            let result;
            try {
                result = JSON.parse(resultText);
            } catch (parseError) {
                console.error('解析响应失败:', resultText);
                throw new Error('服务器响应格式错误');
            }

            if (result.code === 200) {
                alert(`音频"${audioName}"删除成功`);
                // 重新加载课程音频列表
                if (this.app.currentContent) {
                    this.loadCourseAudios(this.app.currentContent.id);
                }
            } else {
                alert('删除失败: ' + (result.msg || '未知错误'));
            }
        } catch (error) {
            console.error('删除音频失败:', error);
            alert('删除音频失败: ' + error.message);
        }
    }

    handleAudioSearch(e) {
        const searchTerm = e.target.value.toLowerCase();
        const audioRows = document.querySelectorAll('#audios-table-body tr');

        audioRows.forEach(row => {
            const name = row.querySelector('#audio-name').textContent.toLowerCase();

            if (name.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
}